<template>
  <div class="analysis-right-drawer">
    <a-tabs
      default-active-key="styleLayout"
      :tab-bar-style="{ color: '#ababab' }"
    >
      <a-tab-pane key="styleLayout" tab="布局样式">
        <style-layout @style-layout-run="styleLayoutRun" />
      </a-tab-pane>
      <a-tab-pane key="dataFilter" tab="数据过滤">
        <data-filter @data-filter-run="dataFilterRun" />
      </a-tab-pane>
      <a-tab-pane key="dataStatistics" tab="数据统计">
        <data-statistics />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Vue, Prop } from 'vue-property-decorator'
import StyleLayout from '@/components/right-drawer/StyleLayout.vue'
import DataFilter from '@/components/right-drawer/DataFilter.vue'
import DataStatistics from '@/components/right-drawer/DataStatistics.vue'
// import GraphAnalysis from '@/store/modules/graphanalysis'
// import {debounce} from 'lodash'

@Component({
  components: {
    StyleLayout,
    DataFilter,
    DataStatistics,
  },
})
export default class RightDrawer extends Vue {
  @Prop({ type: Number }) projectId!: number

  /**
   * 应用当前 布局
   */
  @Emit('style-layout-run')
  public styleLayoutRun(runInfo: any) {
    return runInfo
  }

  // 执行过滤器
  @Emit('data-filter-run')
  public dataFilterRun() {}
}
</script>

<style scoped lang="less">
.analysis-right-drawer {
  background-color: #fff;
  height: 100%;
  overflow: hidden;
  width: 100%;

  // 重写 ant tabs style
  /deep/ .ant-tabs.ant-tabs-top {
    height: 100%;

    // tab bar
    .ant-tabs-bar {
      height: 38px;
      margin-bottom: 0;
      user-select: none;

      .ant-tabs-nav-wrap {
        height: 38px;
        //padding: 0 24px;

        .ant-tabs-nav.ant-tabs-nav-animated {
          width: 100%;

          .ant-tabs-ink-bar.ant-tabs-ink-bar-animated {
            display: none !important;
          }

          .ant-tabs-tab {
            color: #5d637e;
            font-size: 14px;
            font-weight: 600;
            height: 38px;
            letter-spacing: 1px;
            line-height: 38px;
            margin: 0;
            padding: 0 15px;
            text-align: center;
            width: 33.3%;

            &:hover {
              color: #222432;
            }

            &.ant-tabs-tab-active {
              color: #222432;

              &::after {
                background: #6973ff;
                bottom: 1px;
                content: ' ';
                height: 2px;
                left: 50%;
                position: absolute;
                transform: translateX(-50%);
                width: 60px;
              }
            }
          }
        }
      }
    }

    // tab content
    .ant-tabs-content.ant-tabs-top-content {
      //height: calc(~'100% - 60px');
      height: 100%;

      .ant-tabs-tabpane {
        height: 100%;
        padding-right: 0;
        transition: all ease 0.2s;
        width: 100%;
      }
    }
  }
}
</style>
